<template>
  <div class="main">
    <el-form :model="formDataItem" label-position="left" status-icon :rules="rules" ref="ruleForm" label-width="50px" class="demo-ruleForm" v-if="Object.keys(formDataItem).length!==0">
      <div v-if="!['map','image','swiper','marquee'].includes(formDataItem.form_type)">
        <el-form-item label="标题">
          <el-input type="text"  v-model.trim="formDataItem.form_title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="输入框类型"  label-width="100px"  v-if="formDataItem.input_type && formDataItem.form_type !='verification'">
          <el-select v-model.trim="formDataItem.input_type" placeholder="请选择">
            <el-option
              v-for="item in inputArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="绑定验证字段" label-width="150px"  v-if="formDataItem.form_type =='verification'">
          <el-select v-model.trim="formDataItem.bindingId" placeholder="请选择" @change="sortChange">
            <el-option
              v-for="item in field"
              :key="item.field_id"
              :label="item.form_title"
              :value="item.field_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="绑定短信模板" label-width="150px"  v-if="formDataItem.form_type =='verification'">
          <el-select v-model.trim="formDataItem.bindingMessageId" placeholder="请选择" @change="sortChange">
            <el-option
              v-for="item in message"
              :key="item.messages_id"
              :label="item.messages_nickname"
              :value="item.messages_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期类型" label-width="70px" v-if="['picker'].includes(formDataItem.form_type)">
          <el-select v-model.trim="formDataItem.picker_type" placeholder="请选择">
            <el-option
              v-for="item in pickerTypeArry"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标题与内容框排列顺序" label-width="170px">
          <el-select v-model.trim="formDataItem.flex_direction" placeholder="请选择" @change="sortChange">
            <el-option
              v-for="item in (formDataItem.flex_direction=='verify-column' || formDataItem.flex_direction=='verify-row')?directionArr2:directionArr1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </div>

      <el-form-item label="限制输入长度"  label-width="100px" v-if="['input','textarea','password'].includes(formDataItem.form_type)">
        <el-input type="number"  v-model.trim="formDataItem.input_length" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="占位符" label-width="60px" v-show="!['map','button','image','swiper','marquee'].includes(formDataItem.form_type)">
        <el-input type="text" v-model.trim="formDataItem.form_place" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="倒计时(秒)" label-width="80px" v-show="formDataItem.form_type=='verification'">
        <el-input type="number" v-model.trim="formDataItem.input_time" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="上传图片" label-width="70px" v-show="formDataItem.form_type=='image'">
        <el-upload
          ref="upload"
          class="upload-demo"
          :action="actionFile"
           accept=".jpg,.png,.jpeg"
          :headers="tokenFig"
          :on-success="handleAvatarSuccess"
          :on-error="handleAvatarError"
          name="file"
        >
          <el-button
            size="mini"
            icon="el-icon-upload"
            plain
            type="primary"
          >替换图片</el-button
          >
        </el-upload>
      </el-form-item>
      <el-form-item label="默认值" label-width="60px" v-if="!['map','swiper'].includes(formDataItem.form_type)">
        <el-input type="text" v-model.trim="formDataItem.form_content" autocomplete="off"></el-input>
      </el-form-item>
      <div v-if="formDataItem.border_width">
        <div style="text-align: center;margin-bottom: 10px" >文本框设置</div>
        <el-form-item label="边框大小" label-width="70px">
          <el-input type="text" v-model.trim.trim="formDataItem.border_width" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="边框类型" label-width="70px">
          <el-select v-model.trim="formDataItem.border_style" placeholder="请选择">
            <el-option
              v-for="item in borderStyleArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="边框颜色" label-width="70px">
          <el-color-picker v-model="formDataItem.border_color"></el-color-picker>
        </el-form-item>
        <el-form-item label="边框背景颜色" label-width="100px">
          <el-color-picker v-model="formDataItem.background_color"></el-color-picker>
        </el-form-item>
      </div>

      <el-form-item label="验证规则" label-width="80px" v-if="['picker','verification','password','textarea','input',].includes(formDataItem.form_type)">
        <el-checkbox-group v-model.trim="formDataItem.form_validate" @change="onValidate">
          <el-checkbox label="require" :disabled="is_disabled">必填</el-checkbox>
          <el-checkbox label="unique" :disabled="is_disabled">唯一</el-checkbox>
          <el-checkbox label="mobile" :disabled="is_disabled">手机号</el-checkbox>
          <el-checkbox label="idCard" :disabled="is_disabled">身份证</el-checkbox>
          <el-checkbox label="verification_code" :disabled="is_disabled">验证码</el-checkbox>
          <el-checkbox label="mail" :disabled="is_disabled">邮箱</el-checkbox>
          <el-checkbox label="number" :disabled="is_disabled">纯数字</el-checkbox>
          <el-checkbox label="alpha" :disabled="is_disabled">纯字母</el-checkbox>
          <el-checkbox label="alphaNum" :disabled="is_disabled">字母和数字</el-checkbox>
          <el-checkbox label="chs" :disabled="is_disabled">纯汉字</el-checkbox>
          <el-checkbox label="chsAlpha" :disabled="is_disabled">汉字和字母</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <div v-if="Object.keys(formDataItem.options).length!==0 && !['swiper'].includes(formDataItem.form_type)">
        <div style="text-align: center;margin-bottom: 10px">--设置选项--</div>
        <draggable v-model.trim="formDataItem.options" :group="groupOption"  animation="300">
          <transition-group :style="style1">
            <div class="optionBox"  v-for="(item,index) in formDataItem.options" :key="item.id">
              <div class="option-item">
                <el-input v-model.trim="item.label" placeholder="请输入选项名"></el-input>
                <div class="option-icon"><i class="el-icon-delete" @click="formDataItem.options.splice(index,1)"></i></div>
              </div>
            </div>
          </transition-group>
        </draggable>
        <div class="option-add">
          <i class="el-icon-circle-plus-outline" @click="addOption"></i>
        </div>
      </div>
      <div v-if="['marquee'].includes(formDataItem.form_type)">
        <el-form-item label="是否显示通知图标" label-width="150px">
          <el-select v-model.trim="formDataItem.notice_icon_show" placeholder="请选择">
            <el-option
              v-for="item in notice_icon_showArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通知图标" label-width="100px" v-show="formDataItem.notice_icon_show">
          <el-upload
            ref="upload"
            class="upload-demo"
            :action="actionFile"
            accept=".jpg,.png,.jpeg"
            :headers="tokenFig"
            :on-success="noticeSuccess"
            :on-error="handleAvatarError"
            name="file"
          >
            <el-button
              size="mini"
              icon="el-icon-upload"
              plain
              type="primary"
            >替换通知图标</el-button>
          </el-upload>
        <el-input type="text" v-model.trim="formDataItem.notice_icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标大小(px)" label-width="100px">
          <el-input type="number" v-model.trim="formDataItem.notice_width" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="滚动的方式" label-width="100px">
          <el-select v-model.trim="formDataItem.behavior" placeholder="请选择">
            <el-option
              v-for="item in behaviorArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="滚动的方向" label-width="100px">
          <el-select v-model.trim="formDataItem.direction" placeholder="请选择">
            <el-option
              v-for="item in direction_notice"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="滚动速度" label-width="100px">
          <el-input type="number" v-model.trim="formDataItem.scrollamount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="背景颜色" label-width="100px">
          <el-color-picker v-model="formDataItem.bgcolor"></el-color-picker>
        </el-form-item>
        <el-form-item label="字体颜色" label-width="100px">
          <el-color-picker v-model="formDataItem.color"></el-color-picker>
        </el-form-item>
        <el-form-item label="字体大小(px)" label-width="100px">
          <el-input type="number" v-model.trim="formDataItem.font_size" autocomplete="off"></el-input>
        </el-form-item>
      </div>

      <div v-if="['swiper'].includes(formDataItem.form_type)">
        <el-form-item label="指示器是否显示" label-width="110px">
          <el-select v-model.trim="formDataItem.indicator_position" placeholder="请选择">
            <el-option
              v-for="item in indicatorPosition"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否自动切换" label-width="110px">
          <el-select v-model.trim="formDataItem.autoplay" placeholder="请选择">
            <el-option
              v-for="item in autoplay"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="轮播方向" label-width="80px">
          <el-select v-model.trim="formDataItem.direction" placeholder="请选择">
            <el-option
              v-for="item in direction"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否采用衔接滑动" label-width="140px">
          <el-select v-model.trim="formDataItem.circular" placeholder="请选择">
            <el-option
              v-for="item in circular"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前所在滑块" label-width="100px">
          <el-select v-model.trim="formDataItem.initial_index" placeholder="请选择">
            <el-option
              v-for="item in formDataItem.options.length"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自动切换时间间隔(毫秒)" label-width="170px">
          <el-input type="number"  v-model.trim="formDataItem.interval" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="轮播图高度" label-width="100px">
          <el-input type="number" v-model.trim="formDataItem.form_height" autocomplete="off"></el-input>
        </el-form-item>
        <div style="text-align: center;margin-bottom: 10px">--设置选项--</div>
        <draggable v-model.trim="formDataItem.options" :group="groupOption"  animation="300">
          <transition-group :style="style1">
            <div class="optionBox"  v-for="(item,index) in formDataItem.options" :key="item.id">
              <div class="option-item">
                <el-input v-model.trim="item.label" placeholder="请输入选项名"></el-input>
                <div class="option-icon"><i class="el-icon-delete" @click="formDataItem.options.splice(index,1)"></i></div>
                <div class="option-icon">
                  <el-upload
                    ref="swiper"
                    class="upload-demo"
                    :action="actionFile2"
                    accept=".jpg,.png,.jpeg"
                    :headers="tokenFig"
                    :data="{index:index}"
                    :on-success="handleAvatarSuccess2"
                    :on-error="handleAvatarError2"
                    name="file"
                  >
                    <i class="el-icon-upload" style="color:blue;"></i>
                  </el-upload>
                </div>
              </div>
            </div>
          </transition-group>
        </draggable>
        <div class="option-add">
          <i class="el-icon-circle-plus-outline" @click="addOption"></i>
        </div>
      </div>

      <div v-if="['map'].includes(formDataItem.form_type)">
        <el-form-item label="标题">
          <el-input type="text"  v-model.trim="formDataItem.form_title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标题与内容框排列顺序" label-width="170px">
          <el-select v-model.trim="formDataItem.flex_direction" placeholder="请选择" @change="sortChange">
            <el-option
              v-for="item in (formDataItem.flex_direction=='verify-column' || formDataItem.flex_direction=='verify-row')?directionArr2:directionArr1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="缩放等级" label-width="100px">
          <el-input type="number"  v-model.trim="formDataItem.zoom" autocomplete="off"></el-input>
        </el-form-item>
        <div style="border: 2px solid #ff0000;border-radius:10px;padding: 5px">
          <h4>百度地图配置当前经、纬度：请点击 <a style="color: blue" href="http://api.map.baidu.com/lbsapi/getpoint/index.html" target="_blank">百度拾取BD09坐标系统</a>，来设置一下参数</h4>
          <el-form-item label="标记地点经度" label-width="100px">
            <el-input type="number"  v-model.trim="formDataItem.mapDetail.lng" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="标记地点纬度" label-width="100px">
            <el-input type="number"  v-model.trim="formDataItem.mapDetail.lat" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <div style="border: 2px solid #00ff80;border-radius:10px;padding: 5px;margin-top: 10px">
          <h4>腾讯、高德地图配置当前经、纬度：请点击 <a style="color: blue" href="https://lbs.qq.com/getPoint/" target="_blank">腾讯拾取gcj02坐标服务</a>,，来设置一下参数</h4>
          <el-form-item label="标记地点经度" label-width="100px">
            <el-input type="number"  v-model.trim="formDataItem.mapDetail.gcj02_lng" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="标记地点纬度" label-width="100px">
            <el-input type="number"  v-model.trim="formDataItem.mapDetail.gcj02_lat" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="标记地点名【11个字符】" label-width="170px">
          <el-input type="text" maxLength="11" v-model.trim="formDataItem.mapDetail.address1" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地点大致位置【13个字符】" label-width="185px">
          <el-input type="text" maxLength="13"  v-model.trim="formDataItem.mapDetail.address2" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地点商家电话" label-width="100px">
          <el-input type="number"  v-model.trim="formDataItem.mapDetail.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否显示地点详细信息" label-width="160px">
          <el-select v-model.trim="formDataItem.show" placeholder="请选择">
            <el-option
              v-for="item in mapShow"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
<!--      <el-form-item>-->
<!--        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>-->
<!--      </el-form-item>-->
    </el-form>
  </div>
</template>
<style>
.optionBox{
  display: flex;
  align-items:center;
  flex-flow: column nowrap;
  border: 1px solid #ffffff;
}
.optionBox:hover{
  border: 1px dashed #000000;
}
.optionBox .option-item{
  /*background-color: #ff0080;*/
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.optionBox .option-item .option-icon{
  padding: 20px;
  color: #ff0080;
}
.optionBox .option-item .option-icon i{
  cursor: pointer;
}
.option-add{
  text-align: center;
}
.option-add i{
  cursor: pointer;
  font-size: 40px;
}
</style>
<script>
import draggable from 'vuedraggable'
import { getMessageAdminAll} from '@/api/message'
import {getToken} from "@/utils/auth";
export default {
  data() {
    return {
      message:[],
      border_show:false,
      mapShow:[
        {label:'显示',value:true},
        {label:'隐藏',value:false},
      ],
      pickerTypeArry:[
        {label:'日期选择器',value:'date'},
        {label:'日期时间选择器',value:'datetime'},
      ],
      notice_icon_showArr:[
        {label:'显示',value:true},
        {label:'隐藏',value:false},
      ],
      direction_notice:[
        {label:'向右滚动',value:'right'},
        {label:'向左滚动',value:'left'},
        {label:'向上滚动',value:'up'},
        {label:'向下滚动',value:'down'},
      ],
      behaviorArr:[
        {label:'连续滚动',value:'scroll'},
        {label:'滑动一次',value:'slide'},
        {label:'往返滚动',value:'alternate'},
      ],
      circular:[
        {label:'衔接方式',value:true},
        {label:'否',value:false},
      ],
      direction:[
        {label:'横向',value:'horizontal'},
        {label:'纵向',value:'vertical'},
      ],
      autoplay:[
        {label:'自动切换',value:true},
        {label:'否',value:false},
      ],
      indicatorPosition:[
        {label:'显示',value:'default'},
        {label:'隐藏',value:'none'},
      ],
      borderStyleArr:[
        {label:'实线边框',value:'solid'},
        {label:'虚线边框',value:'dashed'},
        // {label:'无边框',value:'none'},
        {label:'点状边框',value:'dotted'},
      ],
      inputArr:[
        {label:'文本输入框',value:'text'},
        {label:'数字输入框',value:'number'}
      ],
      directionArr1:[
        {label:'横向排列',value:'row'},
        {label:'纵向排列',value:'column'}
      ],
      directionArr2:[
        {label:'横向排列',value:'verify-row'},
        {label:'纵向排列',value:'verify-column'}
      ],
      field:[],
      actionFile:process.env.VUE_APP_BASE_API+'/admin/index/headUpload',
      actionFile2:process.env.VUE_APP_BASE_API+'/admin/index/Upload2',
      style1:'min-height:110px;display: block;',
      //只可以拖出
      groupOption:{
        name:'option',
        pull:true, //可以拖出,移动的为该元素的副本；
        put:true//禁止拖入
      },
      is_disabled:false,
      rules: {
        pass: [
          { validator: 'require', trigger: 'blur' }
        ],
        // checkPass: [
        //   { validator: validatePass2, trigger: 'blur' }
        // ],
      },
    };
  },

  computed:{
    tokenFig(){
      return {token:getToken()}
    }
  },
  components:{
    draggable
  },
  props:{
    formDataItem:{
      type:Object,
      required:true,
    },
    formData:{
      // type:Array,
      required:true,
    },
  },
  watch:{
    checkIsInputLenghtShow(type){

    },
    formData(val){
      //this.field = val
      console.log(val)
      // return
      this.field = []
      val.forEach((item, index)=>{
        if(item.form_title!='')
        this.field.push(item)
      })
      console.log(this.field)
    }
  },
  created() {
    getMessageAdminAll().then(res=>{
      this.message = res.data
    })
    this.formData.forEach((item, index)=>{
      if(item.form_title!='')
        this.field.push(item)
    })
  },
  methods: {
    //标题与内容框排列顺序
    //超出俩个后截取，只保留俩个
    sortChange(e){
      if(this.formDataItem['form_type'] === 'radio' && e == 'row'){
        if(Object.keys(this.formDataItem['options']).length>2){
          this.formDataItem['options'] = this.formDataItem['options'].slice(0, 2);
        }
      }

    },
    //图片上传成功后，返回
    handleAvatarSuccess(res, file) {
      if(file.response.status == 200){
        this.formDataItem.form_content = file.response.path
      }else {
        this.$message.error(file.response.msg);
      }
      console.log(this.$refs)
      this.$refs.upload.clearFiles(); //去掉文件列表
    },
    //图片上传失败后，返回
    handleAvatarError(err, file) {
      this.$message.error('图片上传失败!');
      this.$refs.upload.clearFiles(); //去掉文件列表
    },

    //图片上传成功后，返回
    noticeSuccess(res, file) {
      if(file.response.status == 200){
        this.formDataItem.notice_icon = file.response.path
      }else {
        this.$message.error(file.response.msg);
      }
      console.log(this.$refs)
      this.$refs.upload.clearFiles(); //去掉文件列表
    },
    //图片上传失败后，返回
    noticeError(err, file) {
      this.$message.error('图片上传失败!');
      this.$refs.upload.clearFiles(); //去掉文件列表
    },

    //图片上传成功后，返回
    handleAvatarSuccess2(res, file) {
      if(file.response.status == 200){
        this.formDataItem.options[file.response.index]['label'] = file.response.path
      }else {
        this.$message.error(file.response.msg);
      }
      this.$refs.swiper[file.response.index].clearFiles(); //去掉文件列表

    },
    //图片上传失败后，返回
    handleAvatarError2(err, file) {
      this.$message.error('图片上传失败!');
      this.$refs.swiper[file.response.index].clearFiles(); //去掉文件列表
    },

    addOption(id){
      if (this.formDataItem.flex_direction == 'row' && Object.keys(this.formDataItem.options).length>=2){
        this.$message.error('横向排列最多添加2个');
        return
      }
      //最后一个数组，拿到他的id
      let last_id = parseInt(this.formDataItem.options[this.formDataItem.options.length-1].id) + 1
      // console.log("this.formDataItem.options",this.formDataItem.options)
      // console.log(last_id)
      this.formDataItem.options.push({id:last_id,label:`新选项${last_id}`})
    },
    a(){
      console.log(1111)
    },
    onValidate(e){
      console.log(e)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>
